<template>
  <view class="assetTransfer">
    <u-sticky>
      <view class="tabbar">
        <view class="nav">
          <u-search @change="change" placeholder="请输入资产名称" v-model="model.input" bgColor="#fff" :showAction="false"></u-search>
        </view>

      </view>
    </u-sticky>

    <!-- 列表刷新 -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :sticky="true" :up="upOption">

      <view class="list">
        <view class="list-item" v-for="(item,index) in dataList" :key="index">
          <view class="list-item-left">
            <u-icon name="play-right-fill" color="#0d6fb8"></u-icon>
          </view>
          <view class="list-item-right">
            <view class="no">编号：{{item.assetsNo}}</view>
            <view class="name">资产名称：{{item.assetsName}}</view>
            <view>
              <text>鉴定金额：{{item.price}} </text>
            </view>
            <view>
              <text>分配人：{{JSON.parse(item.distributionUser).map((x)=>x.name).join(',')}}</text>
            </view>
            <view>存放地：{{item.deposit}}</view>
            <view>创建时间：{{item.createTime}}</view>
          </view>
          <!-- <view :class="item.state!='已完成'?'state':'stateTwo'">{{item.state}}</view> -->
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      upOption: {
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
          time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
        },
        noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        textNoMore: '-- 无更多数据 --', // 没有更多数据的提示文本
      },
      dataList: [],
      model: {
        input: '',
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  onShow() {
    this.dataList = []
    this.mescroll.resetUpScroll();
  },
  methods: {

    // 搜索
    change(e) {
      this.model.input = e
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.model.pageIndex = page.num
      this.model.pageSize = page.size
      this.$u.api.GetMyLog(this.model).then(res => {
        //后台接口有返回列表的总数据量

        this.mescroll.endBySize(res.data.length, res.count); //必传参数(当前页的数据个数, 总数据量)
        //设置列表数据
        if (this.model.pageIndex == 1) this.dataList = []; //如果是第一页需手动制空列表
        this.dataList = this.dataList.concat(res.data); //追加新数据

      }).catch(() => {
        //联网失败, 结束加载
        this.mescroll.endErr();
      })
    },


  }
}
</script>

<style lang="scss" scoped>
.assetTransfer {
  background: #fff;

  .tabbar {
    position: relative;
    z-index: 999;
    background: #ffffff;
  }

  .nav {
    padding: 10px;
  }
  .list {
    .list-item {
      display: flex;
      position: relative;
      padding: 20rpx 30rpx;
      border-bottom: #f5f5f5 1rpx solid;

      .list-item-left {
        margin-right: 20rpx;
        display: flex;
      }

      .list-item-right {
        view {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .no {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .name {
          font-family: PingFang-SC-Bold;
          font-size: 30rpx;
          font-weight: normal;
          letter-spacing: 0px;
          color: #333333;
        }
      }

      .state {
        position: absolute;
        top: 30rpx;
        right: 0;
        width: 110rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: #fff;
        text-align: center;
        background-color: #e7605d;
        border-radius: 24rpx 0px 0px 24rpx;
        font-size: 24rpx;
      }
      .stateTwo {
        position: absolute;
        top: 30rpx;
        right: 0;
        width: 110rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: #fff;
        text-align: center;
        background-color: #42ae4b;
        border-radius: 24rpx 0px 0px 24rpx;
        font-size: 24rpx;
      }

      .more {
        position: absolute;
        bottom: 30rpx;
        right: 20rpx;
      }
    }
  }
}
</style>
